<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>领取奖励</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
	<link href="{$Think.config.RESOURCEURL}wx_assets/css/iconfont/font_tuan.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
	<link href="{$Think.config.RESOURCEURL}wx_assets/micontent/materiaDetail.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<link href="{$Think.config.RESOURCEURL}wx_assets/micontent/emoji.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/product/product.js{$Think.config.RESOURCE_VER}"></script>

	<link href="{$Think.config.RESOURCEURL}wx_assets/js/area/mobiscroll.javascript.min.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/area/area_array.js{$Think.config.RESOURCE_VER}"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/area/mobiscroll.javascript.min.js{$Think.config.RESOURCE_VER}"></script>
</head>
<body id="receive-reward">
  <input type="text" name="" value="{$userInfo.fullName}" placeholder="请输入姓名" id="name">
  <input type="number" name="" value="{$userInfo.phone}" placeholder="请输入手机号码" id="phone">
  <input type="text" name="" value="{$userInfo.province}{$userInfo.city}{$userInfo.county}" placeholder="请选择省份、城市、区/县" id="area" readonly="" style="display: none">
  <textarea placeholder="请填写详细地址" value="{$userInfo.address}" id="detail" style="display: none;"></textarea>
  <div class="submit-btn" style="background: {$userInfo.themeColor};">立即领取</div>
	<div class="layer-container"></div>
	<!-- 弹框 -->
	<script type="text/html" id="layer-tpl">
		<div class="layer">
			<div class="bg"></div>
			<div class="layer-box">
				<i class="iconfont"><%= iconfont%></i>
				<div class="title"><%= title%></div>
				<div class="discript"><%= discript%></div>
			</div>
		</div>
	</script>
<script>

	function Page () {
		this.type = $.util.getParam('type');
		this.id = $.util.getParamAsObject().id;
		this.moduleId = $.util.getParamAsObject().moduleId;
	}

	$.extend(Page.prototype, {
		init: function() {
			if (this.type == 2) {
				$('#area').css('display', 'block');
				$('#detail').css('display', 'block');
				this.initAdress();
			}
      this.bindEvents();
    },

		bindEvents: function() {
			$('.submit-btn').click($.proxy(this.handleSubmitBtnClick, this))
    },

    initAdress: function() {
      console.log('初始化area')
			var that = this;
      var arearPicker = mobiscroll.area('#area', {
			    theme: 'ios',
			    display: 'bottom',
			    showLabel: true,
			    lang: 'zh',
			    onSet : function(event, inst){
			    	that.address = inst.DataArray
						console.log(inst.DataArray)
			    }
			});
    },

		handleSubmitBtnClick: function() {
			var name = $('#name').val();
			var phone = $('#phone').val();
			var detail = $('#detail').val();
			if (!name) {
				$.util.alert('请出入姓名！');
				return
			}
			if (!phone) {
				$.util.alert('请输入手机号！')
				return
			}
			if(!(/^1[34578]\d{9}$/.test(phone))){
				$.util.alert("手机号码有误，请重填");
				return
			}
			if (this.type == 2 && !this.address && !'{$userInfo.province}') {
				$.util.alert("请选择地址！");
				return
			}
			if (this.type == 2 && !detail) {
				$.util.alert("请填写详细地址！");
				return
			}
			var params = {
			    moduleId: this.moduleId,
					rewardId: this.id,
					fullName: name,
					phone: phone,
					city: this.address ? this.address[1].area_name : '{$userInfo.province}',
					province: this.address ? this.address[0].area_name : '{$userInfo.city}',
					county: this.address ? this.address[2].area_name : '{$userInfo.county}',
					address: detail
      }
      $.ajax({
          type: 'get',
          url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
          dataType: 'json',
          data: {
             module: "micontent",
             method: "RewardSubmitInfo",
             params: JSON.stringify(params)
          },
          success: $.proxy(this.handleSubmitySucc, this),
          error: $.proxy(this.handleAjaxError, this)
      });
		},

		// 提交成功后执行
		handleSubmitySucc: function(res) {
			var that = this
			if (+res.code === 0) {
				$.util.openLayer({
					iconfont: '&#xe62c;',
					title: '领取成功',
					discript: that.type == 2 ? '您的礼品随后将会寄送至此地址<br />请注意查收' : '您的礼品随后将会发放<br />请保持手机畅通'
				});
				setTimeout(function(){
					sessionStorage.setItem('refresh', 'true')
					history.back();
				}, 1000)
			} else {
				$util.alert(res.msg)
			}
		},

		// ajax失败后执行
		handleAjaxError: function(err) {
			$.util.alert(err);
		}
	})

	var page = new Page();
	page.init();
</script>
</body>
</html>
